
<template>
  <div>
    <el-dropdown v-if="isSettingsShow" class="selectSettings" @command="selectSettings">
      <el-button type="success">设置<i class="el-icon-arrow-down el-icon--right"/></el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="item in options"
          :key="item.value"
          :command="item.value"
          @click="selectedSettings(item.value)">
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-button v-if="isAddShow" icon="el-icon-plus" type="success" @click="add">添加</el-button>
    <el-button v-if="isEditShow" icon="el-icon-edit" type="success" @click="edit">编辑</el-button>
    <el-button v-if="isDelShow" icon="el-icon-delete" type="success" @click="del">删除</el-button>
    <el-button v-if="isSendSmsShow" icon="el-icon-position" type="success" @click="sendSms">发送信息</el-button>
    <el-button v-if="isPlusShow" icon="el-icon-plus" type="success" @click="plus">加载</el-button>
    <el-button v-if="isBackShow" icon="el-icon-arrow-left" type="success" @click="goBack">返回</el-button>
    <el-button v-if="isRefreshShow" icon="el-icon-refresh" type="success" @click="refresh">刷新</el-button>
  
  </div>

</template>
<script>
export default {
  name: 'GButtons',
  props: {
    lists: {
      type: Array,
      default: () => []
    },
    isSettingsShow: {
      type: Boolean,
      default: true
    },
    isEditShow: {
      type: Boolean,
      default: true
    },
    isAddShow: {
      type: Boolean,
      default: true
    },
    isDelShow: {
      type: Boolean,
      default: true
    },
    isSendSmsShow: {
      type: Boolean,
      default: false
    },
    isPlusShow: {
      type: Boolean,
      default: false
    },
    isBackShow: {
      type: Boolean,
      default: false
    },
    isRefreshShow: {
      type: Boolean,
      default: false
    },


  },
  data() {
    return {
      // options: [],
      options: [
        {
          value: 0,
          label: '单据设置'
        },
        {
          value: 1,
          label: '显示SQL语句'
        }
      ]
    }
  },
  watch: {
    lists(val) {
      this.options = val
    }
  },
  created() {
    // console.log(this.lists, ' this.options')
    this.options = this.lists.length ? this.lists : this.options
  },
  methods: {
    add() {
      this.$emit('onAdd')
    },
    edit() {
      this.$emit('onEdit')
    },
    del() {
      this.$emit('onDelete')
    },
    plus() {
      this.$emit('onPlus')
    },
    sendSms() {
      this.$emit('onSendSms')
    },
    goBack() {
      this.$emit('onGoBack')
    },
 
    refresh() {
      this.$emit('onRefresh')
    },
    selectSettings(val) {
      this.$emit('selectSettings', val)
    }
  }
}
</script>
<style scoped>
.selectSettings {
  margin-right: 10px;
}
</style>
